<template>
  <f7-page>
    <!-- <f7-navbar :sliding="false">
      <f7-nav-left>
        <f7-link back icon-material="arrow_back"></f7-link>
      </f7-nav-left>
      <f7-nav-title sliding>视频播放</f7-nav-title>
      <f7-nav-right></f7-nav-right>
    </f7-navbar> -->
    <f7-user-navbar title="视频播放"></f7-user-navbar>

    <f7-row ref="videoPlayer" style="left:0; margin-top:44px;width:100%;z-index:1000;">
      <f7-video-player
        :datakey="dataKey"
        :title="videoTitle"
        :sources="playerSources"
        @onPlayerReadied="onPlayerReadied"
        @onPlayerTimeupdate="onPlayerTimeupdate"
        @onPlayerEnded="onPlayerEnded()"
      ></f7-video-player>
      <!-- <a class="back video-black">
        <i class="icon f7-icons color">arrow_left</i>
        <span>{{models.model.courseName}}</span>
      </a>-->
    </f7-row>
  </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";

export default class instance extends controller {
  onBeforeInit() {
    this.urls = {
      query: ""
    };
  }

  mixin() {
    return {
      data() {
        return {
          dataKey: "",
          playerSources: [
            {
              type: "video/mp4",
              src: "http://vjs.zencdn.net/v/oceans.mp4"
            }
          ],
          videoTitle: ""
        };
      },
      methods: {
        onPlayerEnded() {
          console.log("视频播放结束");
        },
        onPlayerReadied() {
          console.log("准备就绪");
        },
        onPlayerTimeupdate(player) {
          console.log("时间更新");
        }
      },
      computed: {},
      mounted() {}
    };
  }
}
</script>

<style scoped>
</style>